<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .one,
        .two,
        .three,
        .four {
            border: 1px solid #333;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <button @click="comName='com-a'">a</button>
            <button @click="comName='com-b'">b</button>
            <button @click="comName='com-c'">c</button>
            <button @click="comName='com-d'">d</button>
        </div>
        <div class="part">
            <!-- <com-a v-if="comName == 'com-a'"></com-a>
            <com-b v-if="comName == 'com-b'"></com-b>
            <com-c v-if="comName == 'com-c'"></com-c>
            <com-d v-if="comName == 'com-d'"></com-d> -->

            <!-- <component is="com-a"></component>
            <component is="com-b"></component>
            <component is="com-c"></component>
            <component is="com-d"></component> -->

            <component :is="comName"></component>
        </div>
    </div>
</body>
<script>
    // 所谓组件切换 => 通过对应组件名称渲染某个组件
    // 1. 模拟实现 => v-if判断 多个组件之间同时渲染一个

    // 2. 官方提供的组件 component可以对应组件名称,渲染某个组件 (可以渲染:全局组件/当前组件下注册的组件)
    //  如果给component组件的is绑定动态属性 => 可以动态选择渲染某个组件



    var comA = {
        data() {
            return {
                count:1,
                timer:null,
            }
        },
        template: `<div class="one">
                <p>这是组件A:{{count}}</p>
        </div>`,
        mounted(){
            this.timer = setInterval(()=>{
                console.log(this.count);
                this.count ++;
            },1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    }

    var comB = {
        data() {
            return {
                count:1
            }
        },
        template: `<div class="two">
            <p>这是组件B:{{count}}</p>
            <p><button @click="count++">count++</button></p>
        </div>`,

    }

    var comC = {
        data() {
            return {

            }
        },
        template: `<div class="three">
            <p>这是组件C</p>
        </div>`,

    }

    var comD = {
        data() {
            return {

            }
        },
        template: `<div class="four">
                <p>这是组件d</p>
            </div>`,
        mounted() {
        },
    }

    // 根实例/组件/应用
    var vm = new Vue({
        el: "#app",
        data: {
           comName:"com-a", // 默认显示组件A
        },
        components: { // 在当前组件(根组件) 注册了两个子组件 (comA comB)
            // 键名 => 组件名
            // 键值 => 组件的配置对象 
            comA: comA,
            comB: comB,
            comC: comC,
            comD: comD,
        }
    })



</script>

</html>